<template>
    <div class="app-container">
        <el-form ref="addManagerRef" label-width="10%" :model="addManagerForm" :rules="addManagerRules">
            <el-form-item label="账户" prop="account">
                <el-input v-model="addManagerForm.account" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="addManagerForm.password" clearable></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="realname">
                <el-input v-model="addManagerForm.realname" clearable></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="telephone">
                <el-input v-model="addManagerForm.telephone" maxlength="11" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click.prevent="onSubmit">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {_addAdmin} from '@/api/admin';

export default {
    name: 'ManagerAdd',
    data() {
        //校验手机号
        const validMobile = (rule, val, callback) => {
            const regex = /^1\d{10}$/;
            if (!regex.test(val)) {
                callback(new Error('非法手机号'));
                return;
            }
            callback();
        };
        return {
            addManagerForm: {
                account: '',
                password: '',
                realname: '',
                telephone: ''
            },
            addManagerRules: {
                account: [{required: true, message: '请输入账号', trigger: 'blur'}],
                password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                realname: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                telephone: [
                    {required: true, message: '请输入电话号码', trigger: 'blur'},
                    {validator: validMobile, trigger: 'blur'}
                ]
            }
        };
    },
    methods: {
        /**
         * 提交
         */
        async onSubmit() {
            const valid = await this.$refs.addManagerRef.validate();
            if (!valid) {
                return;
            }

            const {msg} = await _addAdmin(this.addManagerForm);
            this.$message.success(msg);
            console.log(this.$refs.addManagerRef);
            this.$refs.addManagerRef.resetFields();
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    .el-input {
        width: 30%;
    }
}
</style>
